<template>
  <div class="logisticsInformation_container">
    <!-- 顶部导航-->
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="物流信息"/>

    <!--物流信息不存在-->
    <div class="no_logisticsInformation" v-if="logisticsInformation.length===0">
      暂未查询到物流信息~~
    </div>

    <!--物流信息不存在-->
    <div class="have_logisticsInformation" v-else>

      <div class="orderNumber">
        <p class="express">{{ orderNumber.express }}</p>
        <p class="courierNumber">快递编号：{{ orderNumber.courierNumber }}</p>
      </div>

      <div class="logisticsInformation">
        <p class="titleTips">物流追踪</p>
        <ul class="timeline-wrapper">
          <li class="timeline-item" v-for="(item,index) in lastLogisticsInformation" :key="index">
            <van-row>
              <van-col span="1"></van-col>
              <!--点和线的盒子-->
              <van-col span="2" class="timeline-box">
                <!--园点-->
                <div class="out-circle">
                  <div class="in-circle"></div>
                </div>
                <!--时间线-->
                <div class="long-line" v-if="item.show"></div>

              </van-col>
              <!--内容-->
              <van-col span="21" class="timeline-content">
                <div class="timeline-desc">{{ item.content }}</div>
                <div class="timeline-date" v-if="item.createAt">{{ item.createAt | timeFormat }}</div>
              </van-col>
            </van-row>
          </li>
        </ul>
      </div>
    </div>

  </div>

</template>

<script>
import filter from "@/filters/filter";

export default {
  name: "LogisticsInformation",

  data() {
    return {
      orderId: "",
      orderNumber: {},
      logisticsInformation: [],
    }
  },

  created() {
    //获取地址传递过来的地址地址数据
    this.orderId = this.$route.query.orderId;
    if (this.$route.query.orderId === undefined || this.$route.query.orderId === "") {
      this.$route.go(-1);
      this.$toast("没有该订单物流信息");
    } else {
      this.getLogisticsInformation();
    }
  },

  mounted() {
    let htmlDom = document.querySelector(".logisticsInformation_container");
    let height = document.documentElement.clientHeight || document.body.clientHeight;
    htmlDom.style.height = height + "px";
  },

  computed: {
    lastLogisticsInformation() {
      for (let i = 0; i < this.logisticsInformation.length; i++) {
        this.logisticsInformation[i].show = i !== this.logisticsInformation.length - 1;
      }
      return this.logisticsInformation;
    }
  },

  filters: {
    timeFormat(time) {
      return filter.timeFormat(time);
    }
  },

  methods: {
    //获取订单的物流信息
    async getLogisticsInformation() {
      let res = await this.$axios.post(this.$api.getLogisticsInformation, {orderId: this.orderId});
      if (res.status === 200 && res.data.code === 200) {
        this.logisticsInformation = res.data.data.logisticsInformation;
        this.orderNumber = res.data.data.orderNumber
      }
    },
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after {
  border-bottom-width: 0;
}

.logisticsInformation_container {
  background-color: #fff;

  .no_logisticsInformation {
    margin-top: 50%;
    text-align: center;

  }

  .have_logisticsInformation {
    padding-top: .5rem;
    padding-bottom: 1rem;
    background-color: #fafafa;

    .orderNumber {
      margin-bottom: .8rem;
      background-color: #fff;

      p {
        padding-left: 1rem;
        margin: 0;
      }

      .express {
        padding-top: .5rem;
        padding-bottom: .5rem;
      }

      .courierNumber {
        padding-bottom: .5rem;
      }
    }

    .logisticsInformation {
      background-color: #fff;
      box-shadow: 0 0 10px rgba(217, 216, 216, 0.4);

      .titleTips {
        margin: 0;
        padding: .5rem 0 .5rem 1rem;
      }

      .timeline-wrapper {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .timeline-item {
        height: 4rem;
        //点和线
        .timeline-box {
          position: relative;

          .out-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 1rem;
            height: 1rem;
            background: rgba(14, 116, 218, 0.1);
            box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .1);
            border-radius: 50%;

            .in-circle {
              width: .5rem;
              height: .5rem;
              margin: 0 auto;
              transform: translateY(50%);
              background: rgba(14, 116, 218, 1);
              border-radius: 50%;
              box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
            }
          }

          .long-line {
            width: 2px;
            height: 3rem;
            position: absolute;
            top: 1rem;
            left: .5rem;
            background: rgba(14, 116, 218, 1);
            box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
            opacity: 0.2;
          }
        }

        //内容
        .timeline-content {
          box-sizing: border-box;
          height: 4rem;
          padding-left: .5rem;

          .timeline-desc {
            font-size: 1rem;
            color: #000;
          }

          .timeline-date {
            font-size: .7rem;
            color: #999;
            padding-top: .4rem;
          }
        }
      }
    }
  }
}

</style>